<script setup lang='ts'>
  import { reactive } from 'vue';
  import xmdialog from '@/components/xmdialog.vue';
  import { getAssetsFile } from '@/utils/public'
  const $emit = defineEmits(['openShop','change','resultChange'])
  const action = reactive({
    show:false,
    showtype:3, // 1金豆不足 2钻石不足 
  })
  const handleClose = ()=>{
    action.show = false
  }
  const handleSubmit = ()=>{
    action.show = false
    if(action.showtype == 1) {
      return
    }
    if(action.showtype == 2) {
      // ( kk as any).pay()
      ( kk as any).goCommon({
        code: 100004
      });
      return
    }
  }
  const openDialog = (query:any = {})=>{
    const {
      showtype=1, // 1金豆不足 2钻石不足 
    } = query
    action.showtype = showtype
    action.show = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <xmdialog v-if="action.show" class="confirmbox newDialogBack" v-model:dialogshow="action.show">
    <div class="borderColor">
      <div class="tips">
        {{ action.showtype == 1?'金豆余额不足，请先兑换呦～':'' }}
        {{ action.showtype == 2?'钻石余额不足，请先充值呦～':'' }}
      </div>
      <div class="flex-align-center">
        <div @click="handleClose" class="but close">
          <img :src="getAssetsFile('textImg5.png')" >
        </div>
        <div @click="handleSubmit" class="but submit">
          <img :src="getAssetsFile('textImg4.png')" >
        </div>
      </div>
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>

  .confirmbox {
    .borderColor {
      width: 315px;
      height: 144px;
    }
    .tips {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      text-align: center;
      margin: 26px 0;
      
    }
    .but {
      width: 130px;
      height: 42px;
      border-radius: 21px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: 16px;
      }
    }
    .close {
      margin-right: 10px;
      background: linear-gradient(180deg, #FF911F 0%, #FF580E 100%);
      box-shadow: inset 0px -2px 0px 0px rgba(157,0,0,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.4);
    }
    .submit {
      box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.7), inset 0px -2px 0px 0px rgba(157,0,0,0.5);
      background: linear-gradient(180deg, #FFE21F 0%, #FFC00E 100%);
    }
  }
</style>